<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>四月栈-工具</title>
    <div th:replace="_fragments::basicrefrence"></div>
    <meta name="description" content="本页面是对网站内全部工具和游戏的总览">
</head>


<!--网页主体-->
<body>

    <!--网页头-->
    <nav th:replace="_fragments::guesthead"></nav>



    <div class="m-tenDistance">
        <div class="ui container">
            <div class="ui mobile reversed stackable grid">
                <!--左侧内容概览-->
                <div class="eleven wide column" id="toolsDiv"></div>

                <!--右侧标签栏-->
                <div class="five wide column" >

                    <!--最新栏-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column"><i class="bookmark icon"></i>不是最新</div>
                                <div class="right aligned column"><a href="#">没有更多..</a></div>
                            </div>
                            <div class="ui fluid vertical menu" id="newToolsDiv">
                            </div>
                        </div>
                    </div>


                    <!--二维码区-->
                    <h4 class="m-mobile-hide ui horizontal divider header tenMargin">一张图片</h4>
                    <div class="m-mobile-hide ui centered card" style="width: 200px">
                        <img src="/images/mainPic.jpg" class="ui rounded image"/>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <footer th:replace="_fragments::guestfoot"></footer>


</body>

<script type="text/javascript">
    var currentPage = 1;
    var countPage = 0;
    var toolsDiv = $('#toolsDiv');

    function getPageInfo(next) {
        $.ajax({
            url:"/countAndPageTools",
            data: {
                page: currentPage,
                next: next
            },
            success : function (resp) {
                if (resp.code === 0) {
                    return;
                }
                currentPage = resp.data[0];
                countPage = resp.data[1];
                toolsDiv.append("<div class=\"ui center aligned bottom attached segment\">\n" +
                    "                        <button onclick=\"buttonClick(0)\" class=\"ui mini teal button\">首页</button>\n" +
                    "                        <button onclick=\"buttonClick(1)\" class=\"ui mini teal button\">上一页</button>\n" +
                    "                        <span style=\"font-size:20px;color: teal\" class=\"item\">|当前第 "+currentPage+"页 | 共 "+countPage+"页</span>\n" +
                    "                        <button onclick=\"buttonClick(2)\" class=\"ui mini teal button\">下一页</button>\n" +
                    "                        <button onclick=\"buttonClick(3)\" class=\"ui mini teal button\">尾页</button>\n" +
                    "                    </div>");
            }
        });
    }

    function toolsInfo(page,next) {
        $.ajax({
            url:"/listToolsInfo",
            data: {
                page: page,
                next: next
            },
            success: function (resp) {
                if (resp.code === 0) {
                    return;
                }
                let toolList = resp.data;

                toolsDiv.empty();
                $('#newToolsDiv').empty();
                toolsDiv.append("<div class=\"ui top attached segment \">\n" +
                    "                        <div class=\"ui two column grid\">\n" +
                    "                            <div class=\"column\">\n" +
                    "                                <h3 class=\"ui teal header\">工具</h3>\n" +
                    "                            </div>\n" +
                    "                            <div class=\"right aligned column\">\n" +
                    "                                <span style=\"font-size: 25px\" class=\"item\">共" + toolList.length +"个</span>\n" +
                    "                            </div>\n" +
                    "                        </div>\n" +
                    "                    </div>");

                for (let tool of toolList) {
                    $('#newToolsDiv')
                        .append("<a  href=\""+tool.path+"\" class=\"item\">"+tool.name+"</a>");
                    toolsDiv.append("<div class=\"ui attached segment\">\n" +
                        "                        <div  class=\"ui mobile reversed stackable grid\">\n" +
                        "                            <div class=\"eleven wide column\">\n" +
                        "                                <a href=\""+tool.path+"\"><span  class=\"ui header m-title\">"+tool.name+"</span></a><br/>\n" +
                        "                                <a href=\""+tool.path+"\" class=\"m-abstract\">"+tool.description+"</a>\n" +
                        "\n" +
                        "                                <div  class=\"ui grid\">\n" +
                        "                                    <div class=\"twelve wide column\">\n" +
                        "                                        <div class=\"ui mini horizontal list\">\n" +
                        "                                            <div class=\"item\">\n" +
                        "                                                <img src=\"images/MyHead.jpg\" class=\"ui avatar image\">\n" +
                        "                                                <span class=\"content\">\n" +
                        "                                                    <a href=\"/about\">大地崩坏苍蝇兽</a>\n" +
                        "                                                </span>\n" +
                        "                                            </div>\n" +
                        "                                            <div class=\"item\">\n" +
                        "                                                <i class=\"eye icon\"></i>\n" +
                        "                                                <span class=\"label\">"+tool.view+"</span>\n" +
                        "                                            </div>\n" +
                        "                                        </div>\n" +
                        "                                    </div>\n" +
                        "                                    <div class=\"right aligned four wide column\">\n" +
                        "                                        <label class=\"ui orange basic label\">工具</label>\n" +
                        "                                    </div>\n" +
                        "                                </div>\n" +
                        "\n" +
                        "                            </div>\n" +
                        "\n" +
                        "                            <div class=\"five wide column\">\n" +
                        "                                <a href=\""+tool.path+"\" target=\"_blank\">\n" +
                        "                                    <img src=\""+tool.picture+"\" class=\"ui rounded image centered\" width=\"150\" height=\"150\"/>\n" +
                        "                                </a>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                    </div>");
                }
                getPageInfo(next);
            }
        });
    }

    function buttonClick(next) {
        toolsInfo(currentPage,next);
    }

    buttonClick(0);

</script>


</html>